<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="header">
<div th:fragment="content">
    <!-- 添加模板 -->﻿
    <style>
        .AnalogPhones {
            width: 375px;
            height: 667px;
            background-color: #ffffff;
            margin: 0 auto;
            margin-top: -50px;
            border-style: solid;
            border-width: 12px;
            border-bottom-width: 24px;
            border-radius: 12px;
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
            overflow-x: hidden;
            overflow-y: auto;
        }

        .AnalogPhones::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
    </style>
    <!--<script src="/js/jquery-3.4.1.min.js"></script>-->
    <script src="/assets/js/template/jquery.md5.js"></script>
    <script src="/assets/js/template/md5.js"></script>
    <script src="/assets/js/template/Convert_Pinyin.js"></script>
    <script src="/assets/js/template/script.js"></script>

    <div class="row">
        <!-- 组件列表 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-primary"><h4>模板组件</h4></div>
                <div class="card-body">
                    <nav class="sidebar-main">
                        <ul class="nav nav-drawer">
                            <li class="nav-item nav-item-has-subnav active open">
                                <a href="javascript:void(0)"><i class="mdi mdi-cube-outline"></i> 基础控件</a>
                                <ul class="nav nav-subnav">
                                    <li> <a href="javascript:add_captions();">提示文本</a></li>
                                    <li> <a href="javascript:add_text();">单行文本输入框</a></li>
                                    <li> <a href="javascript:add_textarea();">多行文本输入框</a></li>
                                    <li> <a href="javascript:add_number();">数字输入框</a></li>
                                    <li> <a href="javascript:add_radio();">单选按钮</a></li>
                                    <li> <a href="javascript:add_checkbox();">多选按钮</a></li>
                                </ul>
                            </li>
                            <li class="nav-item nav-item-has-subnav">
                                <a href="javascript:void(0)"><i class="mdi mdi-cube-outline"></i> 高级控件</a>
                                <ul class="nav nav-subnav">
                                    <li th:each="field : ${fields}"> <a th:href="'javascript:'+${field.getFieldKey()}" th:text="${field.getFieldName()}">高级组件</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- 模拟手机 -->
        <div class="col-md-4" style="align-items: center;">
            <div class="AnalogPhones">
                <div class="card">
                    <div class="card-header bg-primary" id="templateTitle">
                        <h4 onclick="ComponentAttributes('EditTemplateTitle_1')" style="text-align: center;" th:text="${template.getTemplateName()}">任务模板名称</h4>
                    </div>
                    <!-- key:  -->
                    <div id="phone" th:data="${template.getTemplateId()}" class="card-body bg-white" th:utext="${template.getTemplateContext()}">
                        <!-- 填报内容 -->

                    </div>
                </div>
            </div>
        </div>

        <!-- 组件属性 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-primary"><h4>组件属性</h4></div>
                <div id="attribute" class="card-body">
                    <!-- 属性内容 -->

                </div>
                <div class="card-body">
                    <div class="form-group">
                        <button th:onclick="'upTemplate(\''+ ${template.getTemplateId()} +'\')'" class="btn btn-warning" type="button">更新模板</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</html>